//
//  ContentView.swift
//  SwiftUIStacks
//
//  Created by 李煜 on 2024/7/30.
//

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      // 顶部标题
      HeaderView()
      
      // 底部套餐方案
      HStack(spacing: 15) {
        // basic套餐
        PricingView(title: "Basic", price: "$9", textColor: .white, bgColor:    .purple)
        
        // Pro套餐
        ZStack {
          PricingView(title: "Pro", price: "$19", textColor: .black, bgColor: Color(red: 240 / 255, green: 240 / 255, blue: 240 / 255))
          
          LabelView(title: "Best for designer", offset: CGPoint(x: 0, y: 87))
        }
      }
      .padding(.horizontal)
      
      // team套餐
      ZStack {
        PricingView(title: "Team", price: "$299", textColor: .white, bgColor: Color(red: 62 / 255, green: 63 / 255, blue: 70 / 255), icon: "wand.and.rays")
          .padding()
        LabelView(title: "Perfect for teams with 20 members",offset: CGPointMake(0, 110))
      }
      
      Spacer()
    }
  }
}

#Preview {
  ContentView()
}

struct HeaderView: View {
  var body: some View {
    HStack {
      VStack(alignment: .leading, spacing: 2){
        Text("Choose")
          .font(.system(.largeTitle, design: .rounded))
          .fontWeight(.black)
        
        Text("Your Plan")
          .font(.system(.largeTitle, design: .rounded))
          .fontWeight(.black)
      }
      Spacer()  // 添加弹簧
    }
    .padding() //    .padding([.leading])
  }
}

struct PricingView: View {
  var title: String
  var price: String
  var textColor: Color
  var bgColor: Color
  var icon: String? // team icon
  
  var body: some View {
    VStack {
      if let icon = icon {
        Image(systemName: icon)
          .font(.largeTitle)
          .foregroundStyle(.white)
      }
      
      Text(title)
        .font(.system(.title, design: .rounded))
        .fontWeight(.black)
        .foregroundStyle(textColor)
      
      Text(price)
        .font(.system(size: 40, weight: .heavy, design: .rounded))
        .foregroundStyle(textColor)
      
      Text("per month")
        .font(.headline)
        .foregroundStyle(textColor)
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
    .padding(40)
    .background(bgColor)
    .cornerRadius(10)
  }
}

struct LabelView: View {
  var title: String
  var offset: CGPoint = .zero
  var body: some View {
    Text(title)
      .font(.system(.caption, design: .rounded))
      .fontWeight(.bold)
      .foregroundStyle(.white)
      .padding(5)
      .background(Color(red: 255 / 255, green: 183 / 255, blue: 37 / 255))
      .offset(x: offset.x, y: offset.y)
    
  }
}
